<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
</head>
<body>
		<div id="demo"></div>
		<script type="text/babel">
			var Textarea = React.createClass({
				getInitialState:function(){
					return {
						value:'defaultValue'
					}
				},
				handleChange:function(e){
					this.setState({
						value:e.target.value
					})
				},
				render:function(){
					return (
						<div>
							<textarea name="" id="" cols="30" rows="10" value={this.state.value} onChange={this.handleChange}></textarea>
						</div>
					)

				}
			})
			ReactDOM.render(
				<Textarea></Textarea>,
				document.querySelector('#demo')
			)
		</script>
</body>
</html>
<!--
	九、表单
	用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 demo9 ）。


	var Input = React.createClass({
	  getInitialState: function() {
	    return {value: 'Hello!'};
	  },
	  handleChange: function(event) {
	    this.setState({value: event.target.value});
	  },
	  render: function () {
	    var value = this.state.value;
	    return (
	      <div>
	        <input type="text" value={value} onChange={this.handleChange} />
	        <p>{value}</p>
	      </div>
	    );
	  }
	});

	ReactDOM.render(<Input/>, document.body);
	上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

 -->
